<template>
  <div id="app">
    <div class="aside">
      <div
        class="router_item"
        @click="goToPage(item)"
        v-for="(item, i) in routerList"
        :key="i"
      >
        <img
          :src="activedRoute === item.path ? item.activedLogoImg : item.logoImg"
          style="height: 100%; width: 100%"
        />
      </div>
    </div>
    <div class="main">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()

const routerList = reactive([
  {
    name: "实时监测数据",
    path: "home",
    logoImg: new URL("@/assets/images/icon-home.png", import.meta.url).href,
    activedLogoImg: new URL(
      "@/assets/images/icon-home-actived.png",
      import.meta.url
    ).href,
  },
  {
    name: "可变视角地图",
    path: "map",
    logoImg: new URL("@/assets/images/icon-map.png", import.meta.url).href,
    activedLogoImg: new URL(
      "@/assets/images/icon-map-actived.png",
      import.meta.url
    ).href,
  },
  {
    name: "无人车",
    path: "control",
    logoImg: new URL("@/assets/images/icon-set.png", import.meta.url).href,
    activedLogoImg: new URL(
      "@/assets/images/icon-set-actived.png",
      import.meta.url
    ).href,
  },
  {
    name: "预警信息",
    path: "warning",
    logoImg: new URL("@/assets/images/icon-save.png", import.meta.url).href,
    activedLogoImg: new URL(
      "@/assets/images/icon-save-actived.png",
      import.meta.url
    ).href,
  },
  {
    name: "智慧农情",
    path: "wisdom",
    logoImg: new URL("@/assets/images/icon-card.png", import.meta.url).href,
    activedLogoImg: new URL(
      "@/assets/images/icon-card-actived.png",
      import.meta.url
    ).href,
  },
])
let activedRoute = ref("home")

const goToPage = (item: any) => {
  activedRoute.value = item.path
  router.push({
    name: item.path,
  })
}
</script>
<style scoped lang="scss">
@keyframes bgmove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#app {
  display: flex;
    /* border:1px solid red; */
  background-image: radial-gradient(circle at center, #56a585, #333951);
}
.aside {
  width: 64px;
  height: 100%;
  /* border:1px solid red; */
  background-image: linear-gradient(
    to left,
    rgba(56, 56, 56, 0.5),
    rgba(133, 133, 133, 0.5)
  );
  .router_item {
    width: 32px;
    height: 32px;
    margin: 16px;
    cursor: pointer;
    img {
      width: 32px;
      height: 32px;
    }
  }
}
.main {
  width: calc(100% - 64px);
  height: 100%;
}
</style>
